Author |
Message |
Maus
Модератор

Joined: 29 Jun 2003
Posts: 8151
Карма: 271 поощрить/наказать
Location: пос. Омсукчан Магаданской области
|
Posted: Thu Jul 21, 2005 4:34 pm (написано за 5 минут 45 секунд)
Post subject: Где почитать про верстку с помощью <DIV> для начинающих?
|
|
Вопрос в общем-то про CSS - все эти float, position, display. На W3C есть спецификация, но мне для понимания её недостаточно. Хочется с примерчиками - чтоб можно было посмотреть, подергать и поковыряться. Просто я сейчас сижу и не могу решить такие идиотские вопросы: 1) Как нарисовать в IE див размерами 1x1 пиксель? 2) Как табличку из 1х2 ячеек переверстать в дивы?
|
|
Back to top |
|
 |
HardNik
Участник форума
Joined: 03 Feb 2005
Posts: 183
Карма: 12 поощрить/наказать
Location: Бишкек, Кыргызская Республика
|
Posted: Thu Jul 21, 2005 8:36 pm (спустя 4 часа 1 минуту; написано за 1 минуту 41 секунду)
Post subject:
|
|
Хм, мне помогло: www.webmascon.com/topics/coding/42a.asp
ну и далее по ссылкам с этой странички.
|
|
Back to top |
|
 |
Maus
Модератор

Joined: 29 Jun 2003
Posts: 8151
Карма: 271 поощрить/наказать
Location: пос. Омсукчан Магаданской области
|
Posted: Thu Jul 21, 2005 8:54 pm (спустя 18 минут; написано за 3 минуты 13 секунд)
Post subject:
|
|
HardNik
Я там был. На Вебмасконе много хорошего, но там или некие общие соображения, или решения очень конкретных задач. Единственно, что вроде бы похожее нашел - это 1) трехпиксельный баг 2) (двух/трех)колоночная верстка Но вообще я надеялся, что есть некий грамотный ресурс, предназначенный именно для объяснения как перейти с табличной верстки на дивную. Задача-то актуальная.
|
|
Back to top |
|
 |
Юрий Насретдинов
Модератор

Joined: 13 Mar 2003
Posts: 8642
Карма: 197 поощрить/наказать
Location: 007 495
|
Posted: Thu Jul 21, 2005 8:57 pm (спустя 2 минуты; написано за 35 секунд)
Post subject:
|
|
Maus wrote: |
Задача-то актуальная. | Ты знаешь, она скорее надуманная. В большинстве случаев надёжнее и удобнее делать таблицами. Т.к. современные браузеры уже давно их умеют по частям показывать.
|
|
Back to top |
|
 |
Maus
Модератор

Joined: 29 Jun 2003
Posts: 8151
Карма: 271 поощрить/наказать
Location: пос. Омсукчан Магаданской области
|
Posted: Thu Jul 21, 2005 9:01 pm (спустя 4 минуты; написано за 3 минуты 9 секунд)
Post subject:
|
|
Юpий Насрeтдинов
уметь-то умеют.. Но вот когда даже на каждый спейсер расходуется таблица - рендерится это ооочень медленно. Особенно в ИЕ. А еще веселее - когда в одной из ячеек таблицы обитает баннер, джаваскриптом подгружаемый из баннерокрутилки, которая тормозит. В таком случае ИЕ долго-долго кажет белую страничку, а потом ррраз! - и все отрендерил. С баннерорезкой фаза "долго-долго" отсутствует, к счастью..
|
|
Back to top |
|
 |
Юрий Насретдинов
Модератор

Joined: 13 Mar 2003
Posts: 8642
Карма: 197 поощрить/наказать
Location: 007 495
|
Posted: Thu Jul 21, 2005 9:05 pm (спустя 4 минуты; написано за 52 секунды)
Post subject:
|
|
Maus wrote: |
когда в одной из ячеек таблицы обитает баннер, джаваскриптом подгружаемый из баннерокрутилки, которая тормозит. | В крайнем случае можно повесить загрузку баннера куда-нибудь в конец документа, где уже таблицы нет. И динамически её туда засовывать. Maus wrote: |
Но вот когда даже на каждый спейсер расходуется таблица | В смысле?
|
|
Back to top |
|
 |
Maus
Модератор

Joined: 29 Jun 2003
Posts: 8151
Карма: 271 поощрить/наказать
Location: пос. Омсукчан Магаданской области
|
Posted: Thu Jul 21, 2005 9:11 pm (спустя 5 минут; написано за 1 минуту 15 секунд)
Post subject:
|
|
Юpий Насрeтдинов
Можно конечно. Так в общем и предполагается сделать, но времени нет == руки не доходят == лень в дебри JS лезть. Юpий Насрeтдинов wrote: |
В смысле? | В прямом. У нас дизайнер со специфичным чувством юмора
|
|
Back to top |
|
 |
Юрий Насретдинов
Модератор

Joined: 13 Mar 2003
Posts: 8642
Карма: 197 поощрить/наказать
Location: 007 495
|
Posted: Thu Jul 21, 2005 9:23 pm (спустя 11 минут; написано за 18 секунд)
Post subject:
|
|
Maus wrote: |
У нас дизайнер со специфичным чувством юмора | :)). Ну, тогда я боюсь и дивы вряд ли могут помочь :).
|
|
Back to top |
|
 |
Maus
Модератор

Joined: 29 Jun 2003
Posts: 8151
Карма: 271 поощрить/наказать
Location: пос. Омсукчан Магаданской области
|
Posted: Thu Jul 21, 2005 9:45 pm (спустя 22 минуты; написано за 24 секунды)
Post subject:
|
|
Юpий Насрeтдинов
Смогут. Я терпеливый, перевоспитаю
|
|
Back to top |
|
 |
HardNik
Участник форума
Joined: 03 Feb 2005
Posts: 183
Карма: 12 поощрить/наказать
Location: Бишкек, Кыргызская Республика
|
Posted: Fri Jul 22, 2005 3:07 am (спустя 5 часов 21 минуту; написано за 23 минуты 50 секунд)
Post subject:
|
|
Maus
Я, вообще-то, присоединяюсь к мнению Юpия Насретдинова. Причины следующие: каждый браузер имеет свою CSS по умолчанию, в FF вы ее и просмотреть можете. Мало этого, в приложении спецификации CSS2 признается, что пока только ее средствами HTML не описать(и через шесть лет ничего не изменилось). Кстати, часть примеров не проходит в IE5.x(с IE6 тоже не все гладко, несмотря на все декларации). А вот таблицы отображаются практически единобразно. Опять же, касаясь JS, DOM IE6 не совпадает с FF. C таблицами - все вроде одинаково. Объясняется это тщательной проработкой таблиц в HTML. Следет признать, что отказ от табличной верстки - глупость. На похожем принципе основаны большинство графических библиотек для GUI: (в Tk изначально была только табличная упаковка, wxWindows(если внимательно проанализировать иерархию объектов), AWT и их форки - яркий пример). Единственное от чего следует отказаться - распорки. IMHO, естественно.
|
|
Back to top |
|
 |
Лобач Олег
Участник форума

Joined: 05 May 2003
Posts: 72
Карма: 6 поощрить/наказать
Location: Новокузнецк
|
Posted: Fri Jul 22, 2005 3:51 am (спустя 44 минуты; написано за 6 минут 56 секунд)
Post subject:
|
|
[off] Лично я за "дивную" вёрстку. Объясню свои мотивы:- "Дивный" код получается лаконичным и достаточно простым.
- для редизайна достаточно изменит CSS не трогая HTML
- нет необходимости делать отдельную версию для печати
- разделение информации и представления (а это всегда гуд :))
- соответствие духу и букве стандартов
[/off]
|
|
Back to top |
|
 |
bæv
Модератор «Дзена»

Joined: 27 Aug 2003
Posts: 7275
Карма: 9986 поощрить/наказать
|
Posted: Fri Jul 22, 2005 5:11 am (спустя 1 час 20 минут; написано за 3 минуты 18 секунд)
Post subject:
|
|
Примеры вёрстки (много и разные): www.csszengarden.com/
www.mezzoblue.com/zengarden/alldesigns/
Тут -- статьи: www.mezzoblue.com/articles/essentials/
(Сейчас найти не могу -- попадался мне один хороший сайт. Если найду/вспомню -- кину ссылку.) P.S. Во! Вспомнил: www.westciv.com/style_master/house/tutorials/quick/positioning/index.html
-- там и других статей много, но эта, кажется, как раз то, что нужно.
|
|
Back to top |
|
 |
Ant
Сотрудник «Лаборатории»

Joined: 17 Jun 2003
Posts: 6840
Карма: 129 поощрить/наказать
|
Posted: Fri Jul 22, 2005 10:56 am (спустя 5 часов 44 минуты; написано за 2 минуты 13 секунд)
Post subject:
|
|
 М |
| Так, только давайте без религиозных войн. Человек хочет получить больше знаний. Не вижу ни чего в этом плохого. У табличной вёрстки есть сови преимущества. У блочной - свои. И использовать нода обе вместе. Тогда будет полная гармония. (-: P.S. А вообще, сейчас как Илья придёт и разнесёт тут всё в пух и прах... (-; |
|
|
Back to top |
|
 |
Maus
Модератор

Joined: 29 Jun 2003
Posts: 8151
Карма: 271 поощрить/наказать
Location: пос. Омсукчан Магаданской области
|
Posted: Fri Jul 22, 2005 1:44 pm (спустя 2 часа 48 минут; написано за 43 секунды)
Post subject:
|
|
bæv
Домо аригато годзаимас! Пошел продираться сквозь ангрийские глаголы...
|
|
Back to top |
|
 |
Дмитрий Котеров
Администратор

Joined: 10 Mar 2003
Posts: 13665
Карма: 413 поощрить/наказать
|
Posted: Fri Jul 22, 2005 9:47 pm (спустя 8 часов 2 минуты; написано за 35 секунд)
Post subject:
|
|
Я вот, грешным делом, до сих пор не понимаю, ну как можно сделать div-ами таблицу из 2 столбцов, да так, чтобы оба столбца имели одинаковую высоту.
|
|
Back to top |
|
 |
HardNik
Участник форума
Joined: 03 Feb 2005
Posts: 183
Карма: 12 поощрить/наказать
Location: Бишкек, Кыргызская Республика
|
Posted: Fri Jul 22, 2005 10:38 pm (спустя 50 минут; написано за 1 минуту 9 секунд)
Post subject:
|
|
Дмитрий Котеров
DIV.TABLE{ display: table } DIV.TR { display: table-row } DIV.TD { display: table-cell } :)
|
|
Back to top |
|
 |
Лобач Олег
Участник форума

Joined: 05 May 2003
Posts: 72
Карма: 6 поощрить/наказать
Location: Новокузнецк
|
Posted: Mon Jul 25, 2005 3:37 am (спустя 2 дня 4 часа 58 минут; написано за 32 секунды)
Post subject:
|
|
Дмитрий Котеров wrote: |
Я вот, грешным делом, до сих пор не понимаю, ну как можно сделать div-ами таблицу из 2 столбцов, да так, чтобы оба столбца имели одинаковую высоту. | rusmarket.ru/test/two_column/
Ну и в догонку - три колонки: rusmarket.ru/test/three_column/
|
|
Back to top |
|
 |
bæv
Модератор «Дзена»

Joined: 27 Aug 2003
Posts: 7275
Карма: 9986 поощрить/наказать
|
Posted: Tue Jul 26, 2005 11:04 pm (спустя 1 день 19 часов 27 минут; написано за 3 минуты 1 секунду)
Post subject:
|
|
P.S. Это... Просили уже: "Без религиозных войн". Высказывайтесь по теме топика.
|
|
Back to top |
|
 |
aross
Участник форума

Joined: 14 May 2005
Posts: 48
Карма: 3 поощрить/наказать
Location: Вологда
|
Posted: Thu Jul 28, 2005 2:07 pm (спустя 1 день 15 часов 2 минуты; написано за 2 минуты 21 секунду)
Post subject:
|
|
Лобач Олег wrote: |
Дмитрий Котеров wrote: |
... не понимаю, ну как можно сделать div-ами таблицу из 2 столбцов, да так, чтобы оба столбца имели одинаковую высоту. | rusmarket.ru/test/two_column/
Ну и в догонку - три колонки: rusmarket.ru/test/three_column/ | А если раскрасить колонки? Попробовал. Ни о какой ОДИНАКОВОЙ ВЫСОТЕ DIVов в примерах речь и не идет. Хотя в целом пример неплохой
|
|
Back to top |
|
 |
Лобач Олег
Участник форума

Joined: 05 May 2003
Posts: 72
Карма: 6 поощрить/наказать
Location: Новокузнецк
|
Posted: Fri Jul 29, 2005 3:26 am (спустя 13 часов 19 минут; написано за 1 минуту 45 секунд)
Post subject:
|
|
aross wrote: |
Ни о какой ОДИНАКОВОЙ ВЫСОТЕ DIVов | Вам обязательно нужна ОДИНАКОВАЯ ВЫСОТА? Или нужно чтобы они ВЫГЛЯДИЛИ одинаковой высоты? Приведите пример, когда одинаковая высота необходима и без неё обойтись не получится.
|
|
Back to top |
|
 |
aross
Участник форума

Joined: 14 May 2005
Posts: 48
Карма: 3 поощрить/наказать
Location: Вологда
|
Posted: Fri Jul 29, 2005 11:03 am (спустя 7 часов 36 минут; написано за 4 минуты 40 секунд)
Post subject:
|
|
HardNik:
Opera 7.23, Firefox 0.9 - работает :), IE 6 - нет :( [offtop] Лобач Олег:
Не нужна, в общем-то, по крайней мере сегодня. А завтра... Завтра, быть может спецификацию все-таки дочитаю. [/offtop]
|
|
Back to top |
|
 |
Maus
Модератор

Joined: 29 Jun 2003
Posts: 8151
Карма: 271 поощрить/наказать
Location: пос. Омсукчан Магаданской области
|
Posted: Fri Jul 29, 2005 11:43 am (спустя 39 минут; написано за 1 минуту 23 секунды)
Post subject:
|
|
Лобач Олег wrote: |
Приведите пример, когда одинаковая высота необходима и без неё обойтись не получится. | Бэкграунд белый, фон каждой колонки темно-серый. Если колонки разной высоты - смотрится некузяво
|
|
Back to top |
|
 |
Лобач Олег
Участник форума

Joined: 05 May 2003
Posts: 72
Карма: 6 поощрить/наказать
Location: Новокузнецк
|
Posted: Fri Jul 29, 2005 11:48 am (спустя 5 минут; написано за 35 секунд)
Post subject:
|
|
Maus, Вы смотрели ссылки, которые я приводил?
|
|
Back to top |
|
 |
Maus
Модератор

Joined: 29 Jun 2003
Posts: 8151
Карма: 271 поощрить/наказать
Location: пос. Омсукчан Магаданской области
|
Posted: Fri Jul 29, 2005 9:48 pm (спустя 9 часов 59 минут; написано за 19 секунд)
Post subject:
|
|
Лобач Олег
Смотрю.. Что-то плохо воспринимается, извините..
|
|
Back to top |
|
 |
WingedFox
Профессионал

Joined: 29 Apr 2003
Posts: 4064
Карма: 268 поощрить/наказать
Location: Питер
|
Posted: Fri Jul 29, 2005 10:57 pm (спустя 1 час 8 минут; написано за 12 минут 28 секунд)
Post subject:
|
|
Maus, Дмитрий Котеров
На 2 вопрос Олег уже ответил. Если не придираться к разной высоте дивов, то с соблюденнием стандартов используется техника "ложных" колонок (оригинал - faux columns (www.alistapart.com/articles/fauxcolumns/) на Alist A Part) Без соблюдения - используется такой трюк (найден на XPoint): Code (html): | скопировать код в буфер обмена | < (december.com/html/4/element/.html)?xml version="1.0" encoding="iso-8859-1"?> (december.com/html/4/element/.html) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html (december.com/html/4/element/html.html) xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> (december.com/html/4/element/.html) <head> (december.com/html/4/element/head.html) <style (december.com/html/4/element/style.html) type="text/css"> (december.com/html/4/element/.html) #t, #t div { border: 1px solid blue; _float: left; _height: 1px; } #t { display: table; } #t div { height: 100%; display: table-cell; } </style> </head> <body> (december.com/html/4/element/body.html) <div (december.com/html/4/element/div.html) id="t"> (december.com/html/4/element/.html) <div> (december.com/html/4/element/div.html)1</div> <div> (december.com/html/4/element/div.html)<p> (december.com/html/4/element/p.html)2</p><p> (december.com/html/4/element/p.html)2</p><p> (december.com/html/4/element/p.html)2</p></div> </div> </body> </html> | Знак _ - это хак для IE. Maus
Решение 1 вопроса: а) #div {font-size: 1px} b) <div><!-- --></div> Что почитать - Xpoint, CodingForums, AlistAPart, Webmascon и т.п. Вообще, лучше не читать, а экспериментировать и делиться своими соображениями с коллегами. Так быстрее будет освоена техника и легче добиться нужного результата. Ну и мыслить надо иначе. У меня есть знакомый, которому проще нарисовать таблицу по срезам из Фотошопа, вместо того, чтобы подумать - где какой блок должен быть расположен. PS: За последнее время единственное для чего я использовал таблицы в структуре страницы, был сайт в 3 колонки, где требовалась работоспособность при отключенном JS.
|
|
Back to top |
|
 |
aross
Участник форума

Joined: 14 May 2005
Posts: 48
Карма: 3 поощрить/наказать
Location: Вологда
|
Posted: Mon Aug 01, 2005 3:49 pm (спустя 2 дня 16 часов 52 минуты; написано за 14 минут 48 секунд)
Post subject:
|
|
WingedFox wrote: |
Знак _ - это хак для IE. | Эксперимент показывает, что "хаком для IE" является не знак "_", а "<?xml version="1.0" encoding="iso-8859-1"?>" перед DOCTYPE Работает. Колонки действительно ОДИНАКОВОЙ высоты. +1 (за найденную информацию)
|
|
Back to top |
|
 |
aross
Участник форума

Joined: 14 May 2005
Posts: 48
Карма: 3 поощрить/наказать
Location: Вологда
|
Posted: Mon Aug 01, 2005 4:47 pm (спустя 58 минут; написано за 18 минут 1 секунду)
Post subject:
|
|
WingedFox wrote: |
Знак _ - это хак для IE. | Позднее эксперимент показал, что без знака "_" в ОгнеЛисе теряется правая колонка, если в ней символов много. [offtop]Едва нашел, как ее вернуть. А куда она девается... Может здесь ясновидящие есть? (-;[/offtop]
|
|
Back to top |
|
 |
aross
Участник форума

Joined: 14 May 2005
Posts: 48
Карма: 3 поощрить/наказать
Location: Вологда
|
Posted: Mon Aug 01, 2005 5:22 pm (спустя 35 минут; написано за 4 минуты 24 секунды)
Post subject:
|
|
Подытожу.Это CSS 2. Для FireFox и Оперы достаточно. ( у меня FireFox 0.9.3 и Opera 7.23 - работает) Для глючных IE (работает в 6.0 и 5.0) 1. "<?xml version="1.0" encoding="iso-8859-1"?>" 2. Code (css): | скопировать код в буфер обмена | #t{ height: 1px; } #t div { _float: left; /* "_float" - чтобы FireFox не глючила */ height: 100%; /* для IE */ } |
|
|
Back to top |
|
 |
WingedFox
Профессионал

Joined: 29 Apr 2003
Posts: 4064
Карма: 268 поощрить/наказать
Location: Питер
|
Posted: Tue Aug 02, 2005 12:36 am (спустя 7 часов 13 минут; написано за 3 минуты 9 секунд)
Post subject:
|
|
aross
<?xml в начале документа сносит крышу IE. Т.е. в режиме соблюдения стандартов работают MZ, FF, Opera, Safari и прочие. IE работает в quirks mode. Только так в нём можно добиться растягивания колонок по высоте. Знак подчёркивания заставляет все браузеры, кроме IE, игнорировать последующую инструкцию.
|
|
Back to top |
|
 |
aross
Участник форума

Joined: 14 May 2005
Posts: 48
Карма: 3 поощрить/наказать
Location: Вологда
|
Posted: Tue Aug 02, 2005 10:05 am (спустя 9 часов 29 минут; написано за 10 секунд)
Post subject:
|
|
Забыл совсем. Конструкцияозначает, что установки стиля будут влиять на всех потомков, в том числе на все вложенные DIV'ы. Правильнее использоватьВ этом случае стиль применяется только к непосредственным потомкам, не затрагивая их потомков
|
|
Back to top |
|
 |
WingedFox
Профессионал

Joined: 29 Apr 2003
Posts: 4064
Карма: 268 поощрить/наказать
Location: Питер
|
Posted: Tue Aug 02, 2005 12:25 pm (спустя 2 часа 19 минут; написано за 1 минуту 7 секунд)
Post subject:
|
|
aross
Для совместимости с IE это делать не стоит. Иначе придётся вводить ещё одно правило для указания IE height: 100%
|
|
Back to top |
|
 |
aross
Участник форума

Joined: 14 May 2005
Posts: 48
Карма: 3 поощрить/наказать
Location: Вологда
|
Posted: Thu Aug 04, 2005 10:27 am (спустя 1 день 22 часа 1 минуту; написано за 5 минут 45 секунд)
Post subject:
|
|
Попробовал поставить внутрь этой конструкции еще DIV'ы (в IE все поплыло, но, впрочем, есть ведь еще тэги ) И WingedFox прав: IE не всегда хочет понимать Element > SubElement правильно [Offtop]Скоро мое спокойное приятие продукции Мелкософт перейдет в радикальное неприятие [/Offtop]
|
|
Back to top |
|
 |
Maus
Модератор

Joined: 29 Jun 2003
Posts: 8151
Карма: 271 поощрить/наказать
Location: пос. Омсукчан Магаданской области
|
Posted: Thu Aug 04, 2005 4:43 pm (спустя 6 часов 16 минут; написано за 1 минуту 53 секунды)
Post subject:
|
|
// offtop: урл топика Lingvo wrote: |
Esteem - ... 2. гл. 1) высоко ценить; почитать, уважать, чтить; быть высокого мнения, отдавать должное |
|
|
Back to top |
|
 |
WingedFox
Профессионал

Joined: 29 Apr 2003
Posts: 4064
Карма: 268 поощрить/наказать
Location: Питер
|
Posted: Fri Aug 05, 2005 12:55 pm (спустя 20 часов 11 минут; написано за 1 минуту 43 секунды)
Post subject:
|
|
aross
IE в принципе не поддерживает CSS2 селекторы (el > sub, el + sib, el[attr] и прочие).
|
|
Back to top |
|
 |
bæv
Модератор «Дзена»

Joined: 27 Aug 2003
Posts: 7275
Карма: 9986 поощрить/наказать
|
Posted: Fri Aug 05, 2005 10:59 pm (спустя 10 часов 3 минуты; написано за 1 минуту 49 секунд)
Post subject:
|
|
Тут наткнулся: типа, "CSS в картинках". css.maxdesign.com.au/floatutorial/
Может, слишком упрощённо, но -- довольно наглядно.
|
|
Back to top |
|
 |
Андрей Фрoлов
Участник форума
Joined: 10 Dec 2004
Posts: 27
Карма: 2 поощрить/наказать
Location: Набережные Челны
|
Posted: Sat Aug 06, 2005 8:04 pm (спустя 21 час 4 минуты; написано за 1 минуту 10 секунд)
Post subject:
|
|
Вот здесь я в свое время разбирался с дивами. Мне тогда нужно было закладки как можно проще сделать. Вроде понятно написано. www.htmlbook.ru/content/
Смотреть раздел *Использование слоев*
|
|
Back to top |
|
 |
Андрей Фрoлов
Участник форума
Joined: 10 Dec 2004
Posts: 27
Карма: 2 поощрить/наказать
Location: Набережные Челны
|
Posted: Fri Aug 26, 2005 1:37 pm (спустя 19 дней 17 часов 33 минуты; написано за 56 секунд)
Post subject:
|
|
Еще одну статью про способы позиционирования блоков HTML-документа с помощью CSS в рассылке увидел - может кому пригодится: softwaremaniacs.org/blog/2005/08/03/css-layout-positioning/
|
|
Back to top |
|
 |
Антон Макаренко
Участник форума

Joined: 05 Feb 2004
Posts: 374
Карма: 36 поощрить/наказать
Location: Киев
|
Posted: Wed Sep 14, 2005 11:48 am (спустя 18 дней 22 часа 10 минут; написано за 2 минуты 27 секунд)
Post subject:
|
|
Готовые техники вёрстки CSS: glish.com/css/
Очень помогло. За пару недель мучений наконец-то понял принципы вёрстки CSS и создал собственный макет документа, который и соответствует стандартам, и работает без глюков.
|
|
Back to top |
|
 |
Maus
Модератор

Joined: 29 Jun 2003
Posts: 8151
Карма: 271 поощрить/наказать
Location: пос. Омсукчан Магаданской области
|
Posted: Wed Sep 14, 2005 1:02 pm (спустя 1 час 14 минут; написано за 4 минуты 40 секунд)
Post subject:
|
|
не знаю, описано ли это (сходу найти не удалось, а название вроде "Peekaboo bug" не шибко информативно, согласитесь), но: 1) Есть подключаемый CSS файл на удаленном сервере (когда все локально, эффект не проявляется) 2) В нем дважды объявлен некий класс: Code (css): | скопировать код в буфер обмена | p { margin-bottom: 7px; margin-top: 6px; } /* тут еще пачка стилей */
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; margin-top: 0px; margin-bottom: 0px; } | Так вот, FF и Opera обрабатывают это нормально, а IE 6 отрисовывает как ему заблагорассудится (не в варианте "1 или 2", а вообще как угодно)
|
|
Back to top |
|
 |
v3.14
Guest
Карма: 388 поощрить/наказать
|
Posted: Fri Sep 16, 2005 8:26 pm (спустя 2 дня 7 часов 23 минуты; написано за 44 секунды)
Post subject:
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <title>Band</title> <style type="text/css" media="screen"> /*<![CDATA[*/ <!-- body { margin: 0px; padding: 0px; font-family: helvetic, arial, sans-serif; color: #000000; font-size: x-small; background-color: #ffffff; } p { color: #000000; font-size: x-small; } #header { margin:5px 0 0 0; background-color: #ffdead; height:100px; width:750px; text-align:right; vertical-align:middle; margin-left: auto; margin-right: auto; border: 1px solid #ff9900; } .address { float:right; width:35%; margin:5px 10px 0 0; color: #ffffff; } #foot { margin-bottom: 10px; text-align: center; font-size: x-small; width: 752px; margin-left: auto; margin-right: auto; vertical-align: middle; border-top: 1px dotted #ff9900; } #foot a { color: #000000; text-decoration: none; } #foot a:hover { color: #ff9900; text-decoration: underline; } a { color:#000000; } #menu_panel { margin:3px 0 0 0; border: 1px solid #ff9900; background-color: #ffdead; width:750px; vertical-align:middle; margin-left: auto; margin-right: auto; overflow: auto; } #body_panel { margin: 3px 0 0 0; width: 752px; vertical-align: middle; margin-left: auto; margin-right: auto; overflow: auto; } #left_panel { width: 160px; float: left; height: auto; } #right_panel { width: 160px; float: right; height: auto; } #center_panel { margin-right: 165px; margin-left: 165px; width: auto; } .box { border: 1px solid #ff9900; margin-bottom:3px; padding: 2px } .box_header { font-size: medium; font-weight: bold; background-color: #ffdead; padding:0 10px 0 5px; margin: 0; text-align: center; border: 0px solid #ff9900; } .box_footer { background-color: #ffdead; padding: 3px 10px 3px 0; text-align: right; font-size: xx-small; margin-top: 4px; } .box_footer a { color: #000000; text-decoration: underline; } table { font-weight: normal; text-align: left; vertical-align: middle; border: 1px solid #cccccc; padding: 3px 5px 3px 5px; background: #fffff; border-collapse: collapse; margin-left: auto; margin-right: auto } td { font-weight: normal; text-align: left; vertical-align: middle; border: 1px solid #cccccc; padding: 3px 5px 3px 5px; background: #fffff; border-collapse: collapse } th { font-weight: normal; text-align: left; vertical-align: middle; border: 1px solid #cccccc; padding: 3px 5px 3px 5px; background: #ffdead; border-collapse: collapse } --> /*]]>*/ </style> </head> <body> <!-- Заголовок --> <div id="header"> <div class="address"> 123 Любая улица, Город, индекс<br /> (812) 555-1212 </div> </div> <!-- Панель меню --> <div id="menu_panel"> <div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'"> Нажми меня </div> <div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'"> Нажми меня </div> <div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'"> Нажми меня </div> <div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'"> Нажми меня </div> <div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'"> Нажми меня </div> <div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'"> Нажми меня </div> <div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'"> Нажми меня </div> </div> <div id="body_panel"> <!-- Левый блок --> <div id="left_panel"> <div class="box"> <div class="box_header">Статьи</div> »<a href="#">Статья 1</a><br /> »<a href="#">Статья 2</a><br /> »<a href="#">Статья 3</a> </div> </div> <!-- Правый блок --> <div id="right_panel"> <div class="box"> <div class="box_header">Новости</div> <div> <p>Содержимое блока</p> </div> </div> <div class="box"> <div class="box_header">Новости</div> <div> <p>Содержимое блока</p> </div> </div> <div class="box"> <div class="box_header">Новости</div> <div> <p>Содержимое блока</p> </div> </div> <div class="box"> <div class="box_header">Новости</div> <div> <p>Содержимое блока</p> </div> </div> <div class="box"> <div class="box_header">Новости</div> <div> <p>Содержимое блока</p> </div> </div> </div> <!-- Центральный блок --> <div id="center_panel"> <div class="box"> <div class="box_header">Имя блока - 11:10 16 января 2015 г.</div> <p>Это текстовая часть</p> <p>Это текстовая часть</p> <div class="box_footer"> <a href="#">Нажми меня</a> </div> </div> </div> </div> <!-- Нижнее меню--> <div id="foot"> <a href="#">Нажми меня</a> | <a href="#">Нажми меня</a> | <a href="#">Нажми меня</a> | <a href="#">Нажми меня</a> | <a href="#">Нажми меня</a> | <a href="#">Нажми меня</a> | <a href="#">Нажми меня</a> </div> </body> </html> Не знаю поможет или нет... три колонки
|
|
Back to top |
|
 |
|